<script setup lang="ts">
import myTopic from "@/composables/myTopic.ts";
import * as Icon from '@icon-park/vue-next';
const {cats,getCats,topics,getTopics,getOneCatTopics} = myTopic();
const route = useRoute();
await getCats();
watch(route,async ()=>{
  const c_id = route.params?.c_id;
  if(c_id){
    myLocalStore().set('c_id',c_id)
    await getOneCatTopics();
  }else{
    await getTopics()
  }
},{
  immediate:true
})
const searchWords = ref('');

const search =  ()=>{
  getTopics(1,{key:"title",keywords:searchWords.value})
}
const refresh =  ()=>{
  searchWords.value='';
  getTopics(1,{key:"title",keywords:searchWords.value})
}
</script>

<template>
  <main class="home">
    <section class="cats" v-if="cats">
      <div class="item" v-for="(item,index) in cats" :key="index">
        <router-link :to="{name:'per.cat',params:{c_id:item.id}}" :class="{active:(route as any).params?.c_id == item.id}">
          <component :is="Icon[item.icon!]" />
          <span>{{item.title}}</span>
        </router-link>
      </div>
    </section>
    <section class="list" v-if="topics">
      <div class="title">
        <div class="search">
          <el-input placeholder="请输入搜索信息" v-model="searchWords" @keyup.enter="search()" />
          <el-button-group class="w-[200px]">
          <el-button type="primary" @click="search()"><icon-search /></el-button>
          <el-button type="success" @click="refresh()"><icon-refresh /></el-button>
          </el-button-group>
        </div>
        <el-button type="primary" @click="$router.push({name:'front.topic.add'})">
          <icon-add-picture />&nbsp;发布帖子
        </el-button>
      </div>
      <my-animate-list-plus :tag="'ul'">
        <my-topic-item :data-index="index" v-for="(item,index) in topics.data" :key="item.id" :item="item"/>
      </my-animate-list-plus>
      <div class="pages" v-if="route.params?.c_id">
        <el-pagination
            :hide-on-single-page="true"
            background
            :current-page="topics.meta.current_page"
            layout="prev, pager, next,total"
            :page-size="topics.meta.per_page"
            :total="topics.meta.total"
            @current-change="getOneCatTopics"
        />
      </div>
      <div class="pages" v-else>
        <el-pagination
            :hide-on-single-page="true"
            background
            layout="prev, pager, next,total"
            :page-size="topics.meta.per_page"
            :total="topics.meta.total"
            @current-change="getTopics"
        />
      </div>
    </section>


  </main>
</template>

<style lang="scss" scoped>
main.home{
  section.cats{
    @apply grid grid-cols-6 gap-2 border shadow p-3 text-sm text-slate-600 ;
    div.item{
        @apply flex items-center justify-center;
        a{
          @apply w-2/3 py-1 flex justify-center items-center gap-1 hover:cursor-pointer hover:text-green-600 duration-300;
          &.active{
            @apply bg-green-600 text-slate-100 rounded;
          }
        }
    }
  }
  section.list{
    @apply min-h-screen;
    div.title{
      @apply flex justify-between items-center pt-2;
      div.search{
        @apply flex justify-start items-center w-1/3 gap-1;

      }
    }
    ul{

    }
    div.pages{
      @apply p-3 flex justify-end;
    }
  }
}
</style>